<template>
	<view class="flash-sale" ref="container">
		<view class="header" v-if="headerImg">
			<image :src="headerImg" />
		</view>
		<scroll-view scroll-y="false" scroll-x="true">
			<view class="timeScroll">
				<div class="logoPic">
					<!-- <image src="https://wx.yixiang.co/h5/img/baokuan.6313c8c8.png"></image> -->
				</div>
				<view v-for="(item, index) in timeList" :key="index">
					<view v-if="active == index" class="timeItem active" @click="setTime(index)">
						<view class="time">{{ item.time }}</view>
						<view class="state">{{ item.state }}</view>
					</view>
					<view v-if="active != index" class="timeItem" @click="setTime(index)">
						<view class="time">{{ item.time }}</view>
						<view class="state">{{ item.state }}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view v-for="(item, index) in timeList" :key="index">
			<view v-if="active == index">
				<view class="list">
					<view class="item acea-row row-between-wrapper" v-for="(itemSeckill, indexSeckill) in seckillList"
						:key="indexSeckill">
						<view class="pictrue">
							<image :src="itemSeckill.image" />
						</view>
						<view class="text acea-row row-column-around">
							<view class="line1" v-text="itemSeckill.title"></view>
							<view class="money">
								限时价
								<text class="num font-color-red">￥{{ itemSeckill.price || '' }}</text>
							</view>
							<view class="progress cart-color">
								<view class="bg-red" :style="{ width: loading ? itemSeckill.percent + '%' : '' }">
								</view>
								<view class="piece font-color-red" v-text="'仅剩' + itemSeckill.stock + '件'"></view>
							</view>
						</view>
						<view class="grab bg-color-red" v-if="item.status === 1 && itemSeckill.stock > 0"
							@click="goDetail(itemSeckill.id, item.status)">马上抢</view>
						<view class="grab" v-if="item.status === 1 && itemSeckill.stock <= 0">已售磬</view>
						<view class="grab bg-color-red" v-if="item.status === 2">即将开始</view>
						<view class="grab bg-color-red" v-if="item.status === 0">已结束</view>
					</view>
				</view>
				<view class="noCommodity" style="background-color: #f5f5f5;"
					v-if="seckillList.length === 0 && page > 1">
					<view class="noPictrue">
						<image :src="`${$VUE_APP_RESOURCES_URL}/images/noGood.png`" class="image" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getSeckillConfig,
		getSeckillList
	} from '@/api/activity'
	import CountDown from '@/components/CountDown'
	import Loading from '@/components/Loading'

	export default {
		name: 'GoodsSeckill',
		components: {
			CountDown,
		},
		props: {},
		data: function() {
			return {
				headerImg: '',
				timeList: [],
				sticky: false,
				loading: false,
				datatime: 0,
				active: 0,
				seckillList: [],
				status: false, //砍价列表是否获取完成 false 未完成 true 完成
				loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
				page: 1, //页码
				limit: 5, //数量
				title: [],
			}
		},
		mounted: function() {
			this.mountedStart()
		},
		onReachBottom() {
			!this.loadingList && this.getSeckillList()
		},
		methods: {
			changeTime: function(index) {
				this.active = index
				this.getSeckillList()
			},
			mountedStart: function() {
				var that = this
				uni.showLoading()
				getSeckillConfig().then(res => {
					that.$set(that, 'headerImg', res.data.lovely)
					that.$set(that, 'timeList', res.data.seckillTime)
					that.$set(that, 'active', res.data.seckillTimeIndex)

					let title = []
					title = res.data.seckillTime.map((item, index) => {
						return {
							name: 'div',
							attrs: {
								class: 'timeItem',
							},
							children: [{
									name: 'div',
									attrs: {
										class: 'time',
									},
									children: [{
										type: 'text',
										text: item.time,
									}, ],
								},
								{
									name: 'div',
									attrs: {
										class: 'state',
									},
									children: [{
										type: 'text',
										text: item.state,
									}, ],
								},
							],
						}
					})
					that.$set(that, 'title', title)
					that.datatime = that.timeList[that.active].stop
					that.getSeckillList()
					that.$nextTick(function() {
						that.sticky = true
						uni.hideLoading()
					})
				})
			},
			setTime: function(index) {
				var that = this
				that.page = 1
				that.loadingList = false
				that.status = false
				that.active = index
				that.datatime = that.timeList[that.active].stop
				this.seckillList = []
				that.getSeckillList()
			},
			getSeckillList: function() {
				var that = this
				if (that.loadingList) return
				if (that.status) return
				var time = that.timeList[that.active].id
				getSeckillList(time, {
					page: that.page,
					limit: that.limit,
				}).then(res => {
					that.status = res.data.length < that.limit
					that.seckillList.push.apply(that.seckillList, res.data)
					that.page++
					uni.hideLoading()
				})
			},
			goDetail: function(id, status) {
				var that = this
				var time = that.timeList[that.active].stop
				this.$yrouter.push({
					path: '/pages/activity/SeckillDetails/index',
					query: {
						id,
						time,
						status,
					},
				})
			},
		},
	}
</script>
<style scoped lang="less">
	.flash-sale {
		background: #f5f5f5 !important;
		height: 100%;
	}

	.timeScroll {
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.list {
		padding: 0 20rpx;

		.item {
			padding: 0.25 * 100rpx;
			border-bottom: 1px solid #f0f0f0;
			height: auto;
			position: relative;
			background: #fff;
			margin-bottom: 0.2 * 100rpx;
			border-radius: 0.2 * 100rpx;
		}
	}

	.logoPic {
		width: 75rpx;
		height: 70rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;

		image {
			width: 75rpx;
			height: 70rpx;
		}
	}

	.timeItem {
		font-size: 0.22 * 100rpx;
		color: #282828;
		width: 150rpx;
		text-align: center;
		padding: 20rpx 0;
		background-color: none;

		&.active {
			.time {
				color: #eb3729;
			}

			.state {
				background: linear-gradient(90deg, #00c17b, #00c17b);
				color: #fff;
				opacity: 1;
				border-radius: 30rpx;
				padding: 0 0.2 * 100rpx;
				font-weight: 800;
				height: 0.37 * 100rpx;
				line-height: 0.37 * 100rpx;
			}
		}
	}

	.timeItem .time {
		font-size: 0.32 * 100rpx;
		font-weight: bold;
		height: 0.5 * 100rpx;
		line-height: 0.5 * 100rpx;
	}

	.timeItem .state {
		height: 0.37 * 100rpx;
		line-height: 0.37 * 100rpx;
	}

	.activity {
		color: #333;
	}

	.flash-sale .list .item .grab {
		background-color: #999;
	}
</style>
